<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <p>1</p>
    <div>2</div>
    <h3>3</h3>



    <div class="box">
        <p>1</p>
        <span>2</span>
    </div>

    <script>

        // 事件源  document

        // 事件对象：用来记录事情发生的整个过程
        //   指的是事件处理函数的第一个参数


        // 作用
        //    可以知道具体坐标
        //    target  可以知道事件具体是由哪个对象触发的



        // 重要：区分  this和 target
        //   this 指向事件源   事件是给谁绑定的，那么this就指向这个事件源
        //   target  绑定事件的这个标签可能存在子元素    target指向具体触发事件的子元素



        document.onclick = function (e) {
            // console.log(e);

            // // IE 使用event 当做事件对象
            // console.log(event);

            // 短路赋值
            var ev = e || event;

            // console.log(ev);

            // target 目标
            // console.log(ev.target);
            // console.log(ev.srcElement);   // IE


            var target = ev.target || ev.srcElement;

            console.log(target);
        }

    </script>

</body>

</html>